<template>
  <card-box title="项目态势">
    <div>
      <div class="chart" ref="chart"></div>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import CardBox from './common/CardBox.vue';
import * as echarts from 'echarts'
export default {
  mixins: [CommonMixin],
  data() {
    return {
      code: 'PROJECT',
      loading: false,
      infoData: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    renderChart() {
      this.$nextTick(() => {
        const { infoData } = this
        const xAxisData = Object.keys(infoData).sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]))
        const chart = this.$refs.chart;
        const myChart = echarts.init(chart)
        window.onresize = myChart.resize
        window.addEventListener('resize', myChart.resize)
        const dataZoom = [
        {
          show: true,
          type: 'slider',
          backgroundColor: 'rgb(19, 63, 100)',
          fillerColor: 'rgb(16, 171, 198)',
          borderColor: 'rgb(19, 63, 100)',
          showDetail: false,
          filterMode: 'empty',
          height: 4,
          left: 0,
          handleSize: 0,
          bottom: 3,
          start: 0,
          end: 50,
          startValue: 0,
          endValue: 2
        },
        {
          type: 'inside',
          start: 0,
          end: 100,
          zoomOnMouseWhieel: false,
          moveOnMouseWheel: true,
          moveOnMouseMove: true
        }
      ]
        const options = {
          
        dataZoom: dataZoom,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              color: '#ffffff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: { color: '#ffffff', interval: 0, },
            data: xAxisData
          },
          yAxis: {
            name: '单位：个',
            nameTextStyle: {
              color: '#ffffff'
            },
            type: 'value',
            axisLabel: { color: '#ffffff' },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(230, 247, 255, 0.2)'
              }
            },
            boundaryGap: [0, 0.01]
          },
          series: [
            {
              name: '未开始',
              type: 'bar',
              itemStyle: {
                color: this.colors(0)
              },
              data: xAxisData.map(key => infoData[key].unplayed_count)
            },
            {
              name: '已开始',
              type: 'bar',
              itemStyle: {
                color: this.colors(1)
              },
              data: xAxisData.map(key => infoData[key].strat_count)
            },
            {
              name: '已结束',
              type: 'bar',
              itemStyle: {
                color: this.colors(2)
              },
              data: xAxisData.map(key => infoData[key].closed_count)
            },
          ]
        };
        myChart.setOption(options)
      })
    },
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      const temp = {}
      dataResult.forEach(item => {
        if(!temp[item.month]) temp[item.month] = { unplayed_count: 0, strat_count: 0, closed_count: 0 }
        temp[item.month].unplayed_count += item.unplayed_count
        temp[item.month].strat_count += item.strat_count
        temp[item.month].closed_count += item.closed_count
      })
      this.infoData = temp
      this.renderChart()
    },
    colors(index) {
      return [
        new echarts.graphic.LinearGradient(
          0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(38, 138, 255, 1)'
          }, {  
            offset: 1,
            color: 'rgba(38, 138, 255, 0.2)'
          }]
        ),
        new echarts.graphic.LinearGradient(
          0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(30, 214, 255, 1)'
          }, {  
            offset: 1,
            color: 'rgba(30, 214, 255, 0.2)'
          }]
        ),
        new echarts.graphic.LinearGradient(
          0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255, 209, 92, 1)'
          }, {  
            offset: 1,
            color: 'rgba(255, 209, 92, 0.2)'
          }]
        ),
      ][index%3]
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: tvh(175);
}
</style>